<template>
    <div class="container" v-if="store.isLook">
        <el-card style="width: 680px">
            <template #header>
                <div class="card-header">
                    <h3>公告信息</h3>
                </div>
            </template>
            <el-table :data="store.NoticeList" border style="width: 100%">
                <el-table-column prop="time" label="发布时间" align="center" />
                <el-table-column prop="text" label="公告内容" align="center" />
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="success" @click="isHandling(scope.$index)">已查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-button type="danger" class="close" @click="close">X</el-button>
    </div>
</template>

<script setup>
import { mapStore } from '@/store';
import { ref } from 'vue';
const store = mapStore()
const isHandling = (evt) => {
    store.NoticeList.splice(evt, 1)
}
const close = () => {
    store.isLook = false
}
</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 15%;
    left: 30%;
    z-index: 1000;

    h3 {
        text-align: center;
    }

    .close {
        position: absolute;
        top: 0;
        right: 0%;
        z-index: 1000;

    }

    // ::v-deep .el-table {

    //     tr,
    //     td.el-table__cell {
    //         max-width: 200px;
    //         /* 设置单元格最大宽度，根据实际情况调整 */
    //         white-space: nowrap;
    //         /* 防止文字换行 */
    //         overflow: hidden;
    //         /* 隐藏溢出的内容 */
    //         text-overflow: ellipsis;
    //         /* 显示省略号 */
    //     }
    // }
}
</style>
